import React, {useEffect, useImperativeHandle, useRef, useState} from 'react';
import './index.scss';
import 'animate.css/animate.min.css';
import {useTranslation} from 'react-i18next';

import {CaptchaMatchingData, CaptchaProps, CaptchaRenderData, CaptchaTrack, ClickDataItem} from '../../index'

// 定义 ref 的类型
interface CaptchaRef {
    refresh: () => Promise<void>;
}
const Captcha: React.ForwardRefRenderFunction<CaptchaRef, CaptchaProps> = (props, ref) => {
    // 在函数内部解构 props
    const {
        value = null,
        scale = 1,
        loadingAnimation = 'slide',
        showClose = true,
        backgroundImage = '',
        matchingResultCodeProps = {
            expired: 4000,
            failed: 4001,
            success: 200
        },
        renderDataApi,
        onValueChange,
        onRenderSuccess,
        onMatchingData
    } = props;
    useImperativeHandle(ref, () => ({
        refresh
    }));
    const { t } = useTranslation();
    const [globalConfig, setGlobalConfig] = useState({
        renderData: {} as CaptchaRenderData,
        matchingData: {
            id: '',
            data: {
                trackList: [] as CaptchaTrack[]
            }
        } as CaptchaMatchingData,
        startDate: new Date(),
        endDate: new Date(),
        startX: 0,
        startY: 0,
        end: 0,
        moveX: 0,
        movePercent: 0,
        captchaClass: '',
        moveTracMaskStyles: {
            width: ''
        },
        moveBtnStyles: {
            transform: 'translateX(0)',
            backgroundImage: ''
        },
        sliderImgStyles: {
            transform: 'translateX(0)'
        },
        rotateImgStyles: {
            transform: 'rotate(0deg)'
        },
        concatImgStyles: {
            height: '',
            backgroundImage: '',
            backgroundPosition: '0px 0px'
        },
        concatBgImgStyles: {
            backgroundImage: ''
        },
        wordImgData: {
            backgroundImage: '',
            tipImage: ''
        },
        clickData: [{count: 0, left: 0, top: 0}] as ClickDataItem[],
        clickCount: 0,
        show: true,
        loading: false,
        tipsContent: '',
        tipsClass: '',
        activeTime: {
            startTime: 0,
            endTime: 0
        },
        renderSuccess: false,
    });

    const isTracking = useRef(false);
    // 初始化验证码容器
    const init = () => {
        let bgElement = document.getElementById('kite-captcha-bg-img-box');
        if (!bgElement) {
            bgElement = document.getElementById('kite-captcha-slider-concat-bg-img');
        }
        const sliderMoveBtnElement = document.getElementById('kite-captcha-slider-move-btn');
        if (bgElement && sliderMoveBtnElement) {
            setGlobalConfig(prev => ({
                ...prev,
                matchingData: {
                    ...prev.matchingData,
                    data: {
                        ...prev.matchingData.data,
                        bgImageWidth: bgElement!.clientWidth,
                        bgImageHeight: bgElement!.clientHeight
                    }
                },
                end: bgElement!.clientWidth - sliderMoveBtnElement.clientWidth
            }));

            if (globalConfig.renderData.type === 'ROTATE') {
                const bgImageSize = globalConfig.matchingData.data.bgImageHeight || 0;
                setGlobalConfig(prev => ({
                    ...prev,
                    matchingData: {
                        ...prev.matchingData,
                        data: {
                            ...prev.matchingData.data,
                            sliderImageWidth: bgImageSize,
                            sliderImageHeight: bgImageSize,
                            bgImageWidth: prev.end
                        }
                    }
                }));
            }
        }
    };

    // 生成滑动验证图片
    const gen = async () => {
        setGlobalConfig(prev => ({
            ...prev,
            renderSuccess: false,
            show: true,
            loading: true
        }));

        try {
            setTimeout(async () => await render(), 1000);
        } catch (error) {
            console.error('验证码获取失败:', error);
            setGlobalConfig(prev => ({
                ...prev,
                loading: false
            }));
        }
    };

    // 渲染验证码
    const render = async () => {
        const renderData = await renderDataApi();
        setGlobalConfig(prev => ({
            ...prev,
            renderData,
            matchingData: {
                ...prev.matchingData,
                id: renderData.id
            }
        }));

        setTimeout(() => {
            const captchaParent = document.getElementById('kite-captcha-parent');
            if (captchaParent) {
                captchaParent.style.setProperty('--scale', scale + '');
            }
        }, 0);

        reset();
        if (backgroundImage) {
            setGlobalConfig(prev => ({
                ...prev,
                renderData: {
                    ...prev.renderData,
                    boxBackgroundImage: backgroundImage
                }
            }));
        }
        setGlobalConfig(prev => ({
            ...prev,
            loading: false,
            moveBtnStyles: {
                ...prev.moveBtnStyles,
                backgroundImage: 'url(' + renderData.sliderButtonImage + ')'
            }
        }));

        let sliderElement = document.getElementById('kite-captcha-slider-move-img');
        if (!sliderElement) {
            sliderElement = document.getElementById('kite-captcha-slider-concat-img');
        }

        if (globalConfig.renderData.type !== 'WORD_IMAGE_CLICK' && sliderElement) {
            setGlobalConfig(prev => ({
                ...prev,
                matchingData: {
                    ...prev.matchingData,
                    data: {
                        ...prev.matchingData.data,
                        sliderImageWidth: sliderElement!.clientWidth,
                        sliderImageHeight: sliderElement!.clientHeight
                    }
                }
            }));
        }

        if (globalConfig.renderData.type === 'CONCAT') {
            setGlobalConfig(prev => ({
                ...prev,
                concatBgImgStyles: {
                    ...prev.concatBgImgStyles,
                    backgroundImage: 'url(' + renderData.backgroundImage + ')'
                }
            }));

            const backgroundImageHeight = renderData.backgroundImageHeight || 0;
            const height = ((backgroundImageHeight - (renderData.data?.randomY || 0)) / backgroundImageHeight) * 180 * scale;

            setGlobalConfig(prev => ({
                ...prev,
                concatImgStyles: {
                    ...prev.concatImgStyles,
                    backgroundImage: 'url(' + renderData.backgroundImage + ')',
                    height: height + 'px'
                }
            }));

            const bgImg = document.getElementById('kite-captcha');
            if (bgImg) {
                setGlobalConfig(prev => ({
                    ...prev,
                    matchingData: {
                        ...prev.matchingData,
                        data: {
                            ...prev.matchingData.data,
                            bgImageWidth: bgImg.clientWidth,
                            bgImageHeight: bgImg.clientHeight
                        }
                    }
                }));
            }
        } else if (globalConfig.renderData.type === 'WORD_IMAGE_CLICK') {
            setGlobalConfig(prev => ({
                ...prev,
                wordImgData: {
                    backgroundImage: renderData.backgroundImage,
                    tipImage: renderData.templateImage
                }
            }));
        }

        setGlobalConfig(prev => ({
            ...prev,
            startDate: new Date()
        }));

        setTimeout(() => {
            setGlobalConfig(prev => ({
                ...prev,
                renderSuccess: true
            }));
        }, 1000);
        onRenderSuccess?.(true);
    };

    const sendMatchingData = () => {
        if (globalConfig.renderData.type === 'WORD_IMAGE_CLICK') {
            const clickContent = document.getElementById('kite-bg-img-click-mask');
            const tipContent = document.getElementById('kite-work-click-tip-img');

            if (clickContent) {
                setGlobalConfig(prev => ({
                    ...prev,
                    matchingData: {
                        ...prev.matchingData,
                        data: {
                            ...prev.matchingData.data,
                            bgImageHeight: clickContent.clientHeight,
                            bgImageWidth: clickContent.clientWidth
                        }
                    }
                }));
            }

            if (tipContent) {
                setGlobalConfig(prev => ({
                    ...prev,
                    matchingData: {
                        ...prev.matchingData,
                        data: {
                            ...prev.matchingData.data,
                            sliderImageWidth: tipContent.clientWidth,
                            sliderImageHeight: tipContent.clientHeight
                        }
                    }
                }));
            }
        }

        setGlobalConfig(prev => ({
            ...prev,
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    startSlidingTime: formatDate(prev.startDate),
                    endSlidingTime: formatDate(prev.endDate)
                }
            }
        }));
        onMatchingData?.(globalConfig.matchingData);
    };

    // 刷新
    const refresh = async () => {
        if (!globalConfig.renderSuccess) {
            return;
        }

        setGlobalConfig(prev => ({
            ...prev,
            captchaClass: `animate__${loadingAnimation}OutRight`
        }));

        await gen();
    };

    // 重置
    const reset = () => {
        setGlobalConfig(prev => ({
            ...prev,
            moveBtnStyles: {
                ...prev.moveBtnStyles,
                transform: 'translateX(0)'
            },
            moveTracMaskStyles: {
                width: ''
            },
            sliderImgStyles: {
                transform: 'translateX(0)'
            },
            rotateImgStyles: {
                transform: 'rotate(0deg)'
            },
            concatImgStyles: {
                height: '',
                backgroundImage: '',
                backgroundPosition: '0px 0px'
            },
            concatBgImgStyles: {
                backgroundImage: ''
            },
            wordImgData: {
                backgroundImage: '',
                tipImage: ''
            },
            end: 0,
            startX: 0,
            startY: 0,
            moveX: 0,
            movePercent: 0,
            startDate: new Date(),
            endDate: new Date(),
            clickCount: 0,
            clickData: [],
            tipsContent: '',
            tipsClass: '',
            captchaClass: '',
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    trackList: []
                }
            }
        }));

        // 移除所有事件监听器
        if (isTracking.current) {
            window.removeEventListener('mousemove', handleMove);
            window.removeEventListener('mouseup', handleUp);
            window.removeEventListener('touchmove', handleMove);
            window.removeEventListener('touchend', handleUp);
            window.removeEventListener('mousemove', handleWordMove);
            isTracking.current = false;
        }

        setGlobalConfig(prev => ({
            ...prev,
            captchaClass: `animate__${loadingAnimation}InLeft`
        }));
    };

    // 关闭验证码容器
    const close = () => {
        setGlobalConfig(prev => ({
            ...prev,
            show: false
        }));
    };

    // 日期格式化
    const formatDate = (date: Date): string => {
        const dt = date;
        const y = dt.getFullYear();
        const m = (dt.getMonth() + 1 + '').padStart(2, '0');
        const d = (dt.getDate() + '').padStart(2, '0');
        const hh = (dt.getHours() + '').padStart(2, '0');
        const mm = (dt.getMinutes() + '').padStart(2, '0');
        const ss = (dt.getSeconds() + '').padStart(2, '0');
        const sss = (dt.getMilliseconds() + '').padStart(2, '0');
        return `${y}-${m}-${d} ${hh}:${mm}:${ss}.${sss}`;
    };

    const tipsError = (msg: string | null) => {
        setGlobalConfig(prev => ({
            ...prev,
            tipsContent: msg ? msg : t('captcha.failed'),
            tipsClass: 'tips-error tips-on'
        }));
    };

    const tipsSuccess = () => {
        const sec = (globalConfig.activeTime.endTime - globalConfig.activeTime.startTime) / 1000;
        setGlobalConfig(prev => ({
            ...prev,
            tipsContent: t('captcha.success', {sec: sec.toFixed(1)}),
            tipsClass: 'tips-success tips-on'
        }));
    };

    // 滑动图片鼠标按下
    const sliderDown = (event: React.MouseEvent | React.TouchEvent) => {
        init();

        setGlobalConfig(prev => ({
            ...prev,
            activeTime: {
                ...prev.activeTime,
                startTime: new Date().getTime()
            }
        }));

        let startX, startY;

        if ('touches' in event) {
            startX = Math.round(event.touches[0].pageX);
            startY = Math.round(event.touches[0].pageY);
        } else {
            startX = event.pageX;
            startY = event.pageY;
        }

        setGlobalConfig(prev => ({
            ...prev,
            startX,
            startY
        }));

        const pageX = startX;
        const pageY = startY;
        const track = {
            x: pageX - startX,
            y: pageY - startY,
            type: 'down',
            t: (new Date().getTime() - globalConfig.startDate.getTime())
        } as CaptchaTrack;

        setGlobalConfig(prev => ({
            ...prev,
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    trackList: [...prev.matchingData.data.trackList, track]
                }
            }
        }));

        // 添加事件监听器
        window.addEventListener('mousemove', handleMove);
        window.addEventListener('mouseup', handleUp);
        window.addEventListener('touchmove', handleMove, { passive: false });
        window.addEventListener('touchend', handleUp);
        isTracking.current = true;
    };

    // 移动处理函数
    const handleMove = (event: MouseEvent | TouchEvent) => {
        let pageX, pageY;

        if (event instanceof TouchEvent) {
            pageX = Math.round(event.touches[0].pageX);
            pageY = Math.round(event.touches[0].pageY);
        } else {
            pageX = Math.round(event.pageX);
            pageY = Math.round(event.pageY);
        }

        const startX = globalConfig.startX;
        const startY = globalConfig.startY;
        const end = globalConfig.end;
        const bgImageWidth = globalConfig.matchingData.data.bgImageWidth || 0;
        let moveX = pageX - startX;

        const track = {
            x: pageX - startX,
            y: pageY - startY,
            type: 'move',
            t: (new Date().getTime() - globalConfig.startDate.getTime())
        } as CaptchaTrack;

        setGlobalConfig(prev => ({
            ...prev,
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    trackList: [...prev.matchingData.data.trackList, track]
                }
            }
        }));

        if (moveX < 0) {
            moveX = 0;
        } else if (moveX > end) {
            moveX = end;
        }

        const movePercent = moveX / bgImageWidth;

        setGlobalConfig(prev => ({
            ...prev,
            moveX,
            movePercent,
            moveTracMaskStyles: {
                width: moveX + 'px'
            },
            moveBtnStyles: {
                ...prev.moveBtnStyles,
                transform: 'translateX(' + moveX + 'px)'
            },
            sliderImgStyles: {
                ...prev.sliderImgStyles,
                transform: 'translateX(' + moveX + 'px)'
            },
            rotateImgStyles: {
                ...prev.rotateImgStyles,
                transform: 'rotate(' + (moveX / (end / 360)) + 'deg)'
            },
            concatImgStyles: {
                ...prev.concatImgStyles,
                backgroundPosition: moveX + 'px 0px'
            }
        }));
    };

    // 鼠标松开处理函数
    const handleUp = (event: MouseEvent | TouchEvent) => {
        setGlobalConfig(prev => ({
            ...prev,
            endDate: new Date()
        }));

        // 移除事件监听器
        window.removeEventListener('mousemove', handleMove);
        window.removeEventListener('mouseup', handleUp);
        window.removeEventListener('touchmove', handleMove);
        window.removeEventListener('touchend', handleUp);
        isTracking.current = false;

        let pageX, pageY;

        if (event instanceof TouchEvent) {
            pageX = Math.round(event.changedTouches[0].pageX);
            pageY = Math.round(event.changedTouches[0].pageY);
        } else {
            pageX = Math.round(event.pageX);
            pageY = Math.round(event.pageY);
        }

        const startX = globalConfig.startX;
        const startY = globalConfig.startY;
        const track = {
            x: pageX - startX,
            y: pageY - startY,
            type: 'up',
            t: (new Date().getTime() - globalConfig.startDate.getTime())
        } as CaptchaTrack;

        setGlobalConfig(prev => ({
            ...prev,
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    trackList: [...prev.matchingData.data.trackList, track]
                }
            }
        }));

        sendMatchingData();
    };

    // 点击文字
    const wordClick = (event: React.MouseEvent) => {
        setGlobalConfig(prev => {
            const newClickCount = prev.clickCount + 1;

            if (newClickCount > 4) {
                return prev;
            }

            if (newClickCount === 1) {
                // move 轨迹
                window.addEventListener('mousemove', handleWordMove);
                isTracking.current = true;

                return {
                    ...prev,
                    clickCount: newClickCount,
                    activeTime: {
                        ...prev.activeTime,
                        startTime: new Date().getTime()
                    },
                    startDate: new Date()
                };
            }

            const track = {
                x: event.nativeEvent.offsetX,
                y: event.nativeEvent.offsetY,
                type: 'click',
                t: (new Date().getTime() - prev.startDate.getTime())
            } as CaptchaTrack;

            const left = event.nativeEvent.offsetX - 10;
            const top = event.nativeEvent.offsetY - 10;

            const newClickData = [
                ...prev.clickData,
                {
                    count: newClickCount,
                    left: left + 'px',
                    top: top + 'px'
                }
            ];

            // 如果是第4次点击，校验
            if (newClickCount === 4) {
                window.removeEventListener('mousemove', handleWordMove);
                isTracking.current = false;
                sendMatchingData();
            }

            return {
                ...prev,
                clickCount: newClickCount,
                matchingData: {
                    ...prev.matchingData,
                    data: {
                        ...prev.matchingData.data,
                        trackList: [...prev.matchingData.data.trackList, track]
                    }
                },
                clickData: newClickData
            };
        });
    };

    // 文字点击移动处理函数
    const handleWordMove = (event: MouseEvent | TouchEvent) => {
        let offsetX, offsetY;

        if (event instanceof TouchEvent) {
            offsetX = event.touches[0].pageX;
            offsetY = event.touches[0].pageY;
        } else {
            offsetX = event.offsetX;
            offsetY = event.offsetY;
        }

        const track = {
            x: offsetX,
            y: offsetY,
            t: (new Date().getTime() - globalConfig.startDate.getTime()),
            type: 'move'
        } as CaptchaTrack;

        setGlobalConfig(prev => ({
            ...prev,
            matchingData: {
                ...prev.matchingData,
                data: {
                    ...prev.matchingData.data,
                    trackList: [...prev.matchingData.data.trackList, track]
                }
            }
        }));
    };

    // 组件挂载时初始化
    useEffect(() => {
        gen();
        return () => {
            // 清理事件监听器
            if (isTracking.current) {
                window.removeEventListener('mousemove', handleMove);
                window.removeEventListener('mouseup', handleUp);
                window.removeEventListener('touchmove', handleMove);
                window.removeEventListener('touchend', handleUp);
                window.removeEventListener('mousemove', handleWordMove);
                isTracking.current = false;
            }
        };
    }, []);

    // 监听 value 变化
    useEffect(() => {
        if (value) {
            setGlobalConfig(prev => ({
                ...prev,
                activeTime: {
                    ...prev.activeTime,
                    endTime: new Date().getTime()
                }
            }));

            if (value == matchingResultCodeProps.expired) {
                tipsError(t('captcha.expired'));
                setTimeout(async () => await refresh(), 1000);
            }

            if (value == matchingResultCodeProps.success) {
                tipsSuccess();
            }

            if (value == matchingResultCodeProps.failed) {
                tipsError(null);
                setTimeout(async () => await refresh(), 1000);
            }
            onValueChange?.(undefined);
        }
    }, [value]);

    // 监听 scale 和 backgroundImage 的变化
    useEffect(() => {
        // 处理 scale 变化的逻辑
        const captchaParent = document.getElementById('kite-captcha-parent');
        if (captchaParent) {
            captchaParent.style.setProperty('--scale', scale + '');
        }
    }, [scale]);

    useEffect(() => {
        if (backgroundImage) {
            setGlobalConfig(prev => ({
                ...prev,
                renderData: {
                    ...prev.renderData,
                    boxBackgroundImage: backgroundImage
                }
            }));
        }
    }, [backgroundImage]);

    if (!globalConfig.show) {
        return null;
    }
    return (
        <div id="kite-captcha-parent" style={{ display: globalConfig.show ? 'block' : 'none' }}>
            <div
                id="kite-captcha-bg-img"
                style={{
                    backgroundImage: 'url(' + globalConfig.renderData.boxBackgroundImage + ')'
                }}
            ></div>

            <div id="kite-captcha-box">
                {globalConfig.loading && globalConfig.renderData.loadingImage && (
                    <img
                        id="kite-captcha-loading"
                        src={globalConfig.renderData.loadingImage}
                        alt="loading"
                    />
                )}

                {globalConfig.renderData.type === 'SLIDER' && (
                    <div
                        id="kite-captcha"
                        className={`kite-captcha-slider animate__animated ${globalConfig.captchaClass}`}
                    >
                        <div className="kite-slider-tips">
                            <span>{t('captcha.dragSlider')}</span>
                        </div>

                        <div className="kite-captcha-content">
                            <div id="kite-captcha-bg-img-box" className="kite-captcha-bg-img-box">
                                <img
                                    id="kite-slider-bg-img"
                                    src={globalConfig.renderData.backgroundImage}
                                    alt=""
                                />
                                <canvas id="kite-captcha-slider-bg-canvas"></canvas>
                            </div>

                            <div
                                id="kite-slider-move-img-box"
                                style={globalConfig.sliderImgStyles}
                                className="kite-slider-move-img-box"
                            >
                                <img
                                    id="kite-captcha-slider-move-img"
                                    src={globalConfig.renderData.templateImage}
                                    alt=""
                                />
                            </div>

                            <div
                                id="kite-captcha-tips"
                                className={`kite-captcha-tips ${globalConfig.tipsClass}`}
                            >
                                {globalConfig.tipsContent}
                            </div>
                        </div>

                        <div className="kite-slider-move">
                            <div className="kite-slider-move-track">
                                <div
                                    id="kite-captcha-slider-move-track-mask"
                                    style={globalConfig.moveTracMaskStyles}
                                ></div>
                                <div className="kite-slider-move-shadow"></div>
                            </div>

                            <div
                                id="kite-captcha-slider-move-btn"
                                style={globalConfig.moveBtnStyles}
                                className="kite-slider-move-btn"
                                onMouseDown={sliderDown}
                                onTouchStart={sliderDown}
                            >
                            </div>
                        </div>
                    </div>
                )}

                {globalConfig.renderData.type === 'ROTATE' && (
                    <div
                        id="kite-captcha"
                        className={`kite-captcha-slider kite-captcha-rotate animate__animated ${globalConfig.captchaClass}`}
                    >
                        <div className="kite-slider-tips">
                            <span>{t('captcha.dragSlider')}</span>
                        </div>

                        <div className="kite-captcha-content">
                            <div id="kite-captcha-bg-img-box" className="kite-captcha-bg-img-box">
                                <img
                                    id="kite-slider-bg-img"
                                    src={globalConfig.renderData.backgroundImage}
                                    alt=""
                                />
                                <canvas id="kite-captcha-slider-bg-canvas"></canvas>
                            </div>

                            <div
                                id="kite-slider-move-img-box"
                                className="kite-slider-move-img-box"
                            >
                                <img
                                    id="kite-captcha-slider-move-img"
                                    src={globalConfig.renderData.templateImage}
                                    style={globalConfig.rotateImgStyles}
                                    alt=""
                                />
                            </div>

                            <div
                                id="kite-captcha-tips"
                                className={`kite-captcha-tips ${globalConfig.tipsClass}`}
                            >
                                {globalConfig.tipsContent}
                            </div>
                        </div>

                        <div className="kite-slider-move">
                            <div className="kite-slider-move-track">
                                <div
                                    id="kite-captcha-slider-move-track-mask"
                                    style={globalConfig.moveTracMaskStyles}
                                ></div>
                                <div className="kite-slider-move-shadow"></div>
                            </div>

                            <div
                                id="kite-captcha-slider-move-btn"
                                style={globalConfig.moveBtnStyles}
                                className="kite-slider-move-btn"
                                onMouseDown={sliderDown}
                                onTouchStart={sliderDown}
                            >
                            </div>
                        </div>
                    </div>
                )}

                {globalConfig.renderData.type === 'CONCAT' && (
                    <div
                        id="kite-captcha"
                        className={`kite-captcha-slider kite-captcha-concat animate__animated ${globalConfig.captchaClass}`}
                    >
                        <div className="kite-slider-tips">
                            <span>{t('captcha.dragSlider')}</span>
                        </div>

                        <div className="kite-captcha-content">
                            <div
                                id="kite-captcha-slider-concat-img"
                                style={globalConfig.concatImgStyles}
                                className="kite-captcha-slider-concat-img"
                            >
                                <img
                                    id="kite-captcha-slider-concat-slider-img"
                                    alt=""
                                />
                            </div>

                            <div
                                id="kite-captcha-slider-concat-bg-img"
                                style={globalConfig.concatBgImgStyles}
                                className="kite-captcha-slider-concat-bg-img"
                            ></div>

                            <div
                                id="kite-captcha-tips"
                                className={`kite-captcha-tips ${globalConfig.tipsClass}`}
                            >
                                {globalConfig.tipsContent}
                            </div>
                        </div>

                        <div className="kite-slider-move">
                            <div className="kite-slider-move-track">
                                <div
                                    id="kite-captcha-slider-move-track-mask"
                                    style={{
                                        ...globalConfig.moveTracMaskStyles,
                                        borderColor: 'rgb(2, 152, 248)',
                                        backgroundColor: 'rgb(137, 210, 255)'
                                    }}
                                ></div>
                                <div className="kite-slider-move-shadow"></div>
                            </div>

                            <div
                                id="kite-captcha-slider-move-btn"
                                style={globalConfig.moveBtnStyles}
                                className="kite-slider-move-btn"
                                onMouseDown={sliderDown}
                                onTouchStart={sliderDown}
                            >
                            </div>
                        </div>
                    </div>
                )}

                {globalConfig.renderData.type === 'WORD_IMAGE_CLICK' && (
                    <div
                        id="kite-captcha"
                        className={`kite-captcha-slider kite-captcha-work-click animate__animated ${globalConfig.captchaClass}`}
                    >
                        <div className="kite-work-click-tips">
                            <span>{t('captcha.clickTips')}</span>
                            <img
                                id="kite-work-click-tip-img"
                                src={globalConfig.wordImgData.tipImage}
                                className="kite-work-click-tip-img"
                            />
                        </div>

                        <div className="kite-captcha-content" onClick={wordClick}>
                            <div className="kite-captcha-bg-img-box">
                                <img
                                    id="kite-captcha-work-click-bg-img"
                                    src={globalConfig.wordImgData.backgroundImage}
                                    className="kite-captcha-work-click-bg-img"
                                />
                                <canvas id="kite-captcha-slider-bg-canvas"></canvas>
                                <div id="kite-bg-img-click-mask">
                                    {globalConfig.clickData.map((item) => (
                                        <span
                                            key={'click_' + item.count}
                                            style={{ left: item.left, top: item.top }}
                                            className="click-span"
                                        >
                      {item.count}
                    </span>
                                    ))}
                                </div>
                            </div>

                            <div
                                id="kite-captcha-tips"
                                className={`kite-captcha-tips ${globalConfig.tipsClass}`}
                            >
                                {globalConfig.tipsContent}
                            </div>
                        </div>
                    </div>
                )}
            </div>

            <div className="kite-captcha-slider-footer">
                {globalConfig.renderData.logoImage && (
                    <img
                        src={globalConfig.renderData.logoImage}
                        alt="captcha-logo"
                        className="kite-captcha-logo"
                    />
                )}

                <div className="captcha-tool-button">
                    {showClose && (
                        <div
                            title={t('captcha.closeTips')}
                            className="kite-close-btn"
                            onClick={close}
                        ></div>
                    )}

                    <div
                        title={t('captcha.refreshTips')}
                        className="kite-refresh-btn"
                        onClick={refresh}
                    ></div>

                    <div
                        title={t('captcha.infoTips')}
                        className="kite-info-btn"
                    ></div>
                </div>
            </div>
        </div>
    );
};

export default React.forwardRef(Captcha);
